blob: a0590dbb70e0180653850f32cd3c3bb7a54b3594 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<script lang="ts">
export let blurred = false
export let backgroundUrl: string | null = null
</script>
<main class:has-blurred-background={blurred && backgroundUrl}>
{#if blurred && backgroundUrl}
<div class="blurred-background-container-container">
<div class="blurred-background-container">
<img class="blurred-background" src={backgroundUrl} alt="Background" />
</div>
</div>
{/if}
<div class="content">
<slot />
</div>
</main>
<style>
main {
position: relative;
}
.blurred-background-container-container {
position: absolute;
width: 47rem;
height: calc(100% + 1em);
z-index: -9;
overflow: hidden;
clip: rect(-1em, auto, auto, -2em);
}
.blurred-background {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
object-fit: cover;
background-blend-mode: overlay;
filter: blur(1em) brightness(0.6);
}
.content > :global(#categories),
.content > :global(.profile-list) {
max-width: 47rem;
}
@media only screen and (max-width: 1400px) {
.blurred-background-container-container {
left: calc(5em + 5%);
width: 90%;
clip: rect(-1.7em, auto, auto, -10em);
}
main {
margin-top: 0.75em;
}
}
@media only screen and (max-width: 1040px) {
.blurred-background-container-container {
left: 0 !important;
width: 100vw !important;
}
}
</style>
|
